html, body {
    height: 100%;
    margin: 0;
}

body {
    min-height: 100vh;
    display: flex;
    flex-direction: column; 
    font-family:"Helvetica Neue","Hiragino Sans","Noto Sans JP",sans-serif;
 display: flex;
}

footer {
    margin-top: auto;
}



/* =========================
   レイアウト
========================= */
div {
  display: flex;
  justify-content: center; /* 水平方向の中央揃え */
  height: 100px;
}

/* =========================
nav
========================= */
nav{
 background:#000;
 color:#fff;
 overflow:auto;
}

.nav-header{
 position:sticky;
 top:0;
 background:#000;
 color:#fff;
 font-weight:bold;
 padding:14px 16px;
 border-bottom:1px solid #333;
 z-index:10;
}

nav h1{
 margin:16px;
 font-size:14px;
}

nav details{
 margin:6px 12px;
 background:#111;
 border:1px solid #333;
 border-radius:6px;
}

nav summary{
 padding:8px 10px;
 cursor:pointer;
}

nav summary span{
 font-weight:600;
 color:#fff;
}

nav ul{
 list-style:none;
 margin:0;
 padding:6px 10px 10px 16px;
}

nav li{margin:4px 0}

nav a{
 display:block;
 padding:6px 8px;
 border-radius:4px;
 color:#fff;
 text-decoration:none;
}

nav a:hover{background:#1f2937}

nav a.active{
 background:#2563eb;
}


}